<template>
  <div class="upload-container">
    <el-button
      icon="el-icon-document"
      size="mini"
      :style="{background:color,borderColor:color}"
      type="primary"
      @click=" dialogVisible=true"
    >随机文章
    </el-button>
    <el-dialog
      title="random文章"
      :visible.sync="dialogVisible"
      width="600px"
      append-to-body
      :close-on-click-modal="false"
    >
      <div style="margin-top: 15px;">
        <el-input v-model="rewrite_rate" placeholder="重新比例" />
        <el-input v-model="keyword" placeholder="keyword" />
        <el-input v-model="title" placeholder="title" />
        <el-button v-loading="loading" type="primary" @click="HandleGetContent">开始生成</el-button>
      </div>
      <div>
        <h3 v-html="content.title" />
        <div v-html="content.content" />
      </div>
      <span v-if="content.content.length" slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="danger" @click="handInsert">插入</el-button>
      </span>
      <span v-else slot="footer" class="dialog-footer">
        <el-tag>生成文章需要1分钟左右</el-tag>
      </span>
    </el-dialog>
  </div>
</template>

<script>
require('vue-select-image/dist/vue-select-image.css')

import {
  MakeRandomArticle
} from '@/api/cms/openai'

export default {
  name: 'Makerandomarticle',
  props: {
    color: {
      type: String,
      default: '#1890ff'
    }
  },
  data() {
    return {
      dialogVisible: false,
      content: { title: '', content: '' },
      title: '',
      keyword: '',
      rewrite_rate: 0.1,
      loading: false
    }
  },
  computed: {},
  methods: {
    HandleGetContent() {
      this.allLoading = true
      if (!this.keyword) {
        return
      }
      this.content.title = this.title
      this.content.content = ''
      this.loading = true
      MakeRandomArticle({ keyword: this.keyword, title: this.title, rewrite_rate: this.rewrite_rate })
        .then(response => {
          this.content.content = response.html
          this.loading = false
        }).catch(e => {
          console.log('error')
          this.loading = false
        })
    },
    handInsert() {
      this.$emit('successCBK', this.content)
      this.dialogVisible = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .editor-slide-upload {
    margin-bottom: 20px;
    :deep(.el-upload--picture-card) {
      width: 100%;
    }
  }

  .mt-pagination {
    float: right;
    margin-top: 5px;
  }
</style>

